<template>
  <ul class="todo-main">
    <!--在这里将全部事件展示出来 列表渲染-->
    <li v-for="(item, index) in todos" :key="item.id">
      <label>
        <!--v-model:效果可以实现,真:勾选上 假:不勾选  如果你用v-model,你是在子组件当中直接修改父亲的数据  props只读的-->
        <input
          type="checkbox"
          :checked="item.done"
          @change="handler(item.id)"
        />
        <span>{{ item.title }}</span>
      </label>
      <!--元素可以实现:显示|隐藏效果 v-if|v-show|动态行内样式-->
      <transition name="todo">
        <button class="btn btn-danger" v-show="item.done" @click="deleteTodo(item.id)">删除</button>
      </transition>
    </li>
  </ul>
</template>

<script>
export default {
  name: "",
  //接受props写法:数组,对象 常用的是数组
  //子组件接受的props自定义属性,作为当前组件实例自身的属性！！！
  props: ["todos", "updateTodoDone", "deleteTodo"],
  methods: {
    //表单元素复选框change事件[单机事件可以使用,但是表单元素很少点击事件一起使用]
    handler(id) {
      //子组件调用父组件的方法修改父亲的数据
      this.updateTodoDone(id);
    },
  },
};
</script>

<style scoped>
.todo-enter{
  transform: rotate(-15deg) scale(1);
}

.todo-enter-active{
   transition:all 0.5s;
}

.todo-enter-to{
   transform: rotate(15deg) scale(1.2);
}



.todo-leave{
   opacity: 1;
   border-radius: 0px;
}

.todo-leave-active{
   transition:all .5s;
}
.todo-leave-to{
   opacity: 0;
   border-radius: 50%;
}


</style>
